<template>
  <!-- 搜索 -->
  <el-card style="height: 80px">
    <search-comp
      :label="label"
      @handleSearch="handleSearch"
      @handleReset="handleReset"
    />
  </el-card>
  <!-- 表单 -->
  <el-card style="margin: 10px 0px">
    <el-button icon="Plus" type="primary" size="default" @click="addConfig"
      >添加配置</el-button
    >
    <el-table style="margin: 10px 0px" :data="configArr" stripe>
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column
        label="名称"
        prop="label"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="值"
        prop="value"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="类型"
        prop="type"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="排序"
        prop="sort"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="描述"
        prop="description"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="备注"
        prop="remarks"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="创建人"
        prop="createBy"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip>
        <template #default="scope">
          {{ formatDateTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="150px">
        <template #default="scope">
          <el-button
            type="primary"
            link
            size="small"
            icon="Edit"
            @click="updateConfig(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            :title="`你确定要删除吗?`"
            width="260px"
            @confirm="deleteConfig(scope.row.id)"
          >
            <template #reference>
              <el-button link type="danger" size="small" icon="Delete"
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!-- 分页 -->
  <el-card>
    <pagination
      :pageNum="pageNum"
      :pageSize="pageSize"
      :total="total"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
    />
  </el-card>
  <!-- 新增或者编辑 -->
  <drawer ref="drawerRef" @cancel="handleCancel" @submit="handleSubmit">
    <template v-slot:title>
      <h4>{{ formParams.id ? "更新系统配置" : "添加系统配置" }}</h4>
    </template>
    <template v-slot:content>
      <el-form
        ref="formRef"
        label-width="auto"
        :model="formParams"
        :rules="rules"
      >
        <el-form-item label="名称" prop="label">
          <el-input v-model="formParams.label"></el-input>
        </el-form-item>
        <el-form-item label="值" prop="value">
          <el-input v-model="formParams.value"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-input v-model="formParams.type"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="formParams.sort"></el-input>
        </el-form-item>
        <el-form-item label="描述 " prop="description">
          <el-input v-model="formParams.description" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="formParams.remarks" type="textarea"></el-input>
        </el-form-item>
      </el-form>
    </template>
  </drawer>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive, nextTick } from "vue";
import { reqFindPage, reqSave, reqDelete } from "@/api/acl/configs";
import { formatDateTime } from "@/utlis/datetime";
import { validatorNames } from "@/utlis/validator";
import { ElMessage } from "element-plus";
import type { IConfig } from "@/api/acl/type";
const label = ref("名称");
const configArr = ref([]);
//默认页码
const pageNum = ref<number>(1);
//一页展示几条数据
const pageSize = ref<number>(5);
//用户总个数
const total = ref<number>(0);
//搜索条件
const keyword = ref<string>("");
const drawerRef = ref();
const formRef = ref();
const formParams = reactive<IConfig>({
  label: "",
  value: "",
  type: "",
  sort: 0,
  description: "",
  remarks: "",
});
onMounted(() => {
  inintData();
});
const inintData = async () => {
  const perams = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    params: {
      name: keyword.value,
    },
  };
  const res = await reqFindPage(perams);
  if (res.code == 200) {
    total.value = res.data.totalSize;
    configArr.value = res.data.content;
  }
};
//搜索
const handleSearch = (val: string) => {
  keyword.value = val;
  pageNum.value = 1;
  inintData();
};
//重置搜索
const handleReset = () => {
  keyword.value = "";
  pageNum.value = 1;
  inintData();
};
//分页器下拉菜单的自定义事件的回调
const handleCurrentChange = (val: number) => {
  pageNum.value = val;
  inintData();
};
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  inintData();
};
//编辑
const updateConfig = (row: any) => {
  addConfig();
  //存储收集已有的账号信息
  Object.assign(formParams, row);
};
//删除
const deleteConfig = async (id: any) => {
  let params = [];
  let idArray = (id + "").split(",");
  for (let i = 0; i < idArray.length; i++) {
    params.push({ id: idArray[i] });
  }
  const res = await reqDelete(params);
  if (res.code === 200) {
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    inintData();
  } else {
    ElMessage({
      type: "error",
      message: res.msg,
    });
  }
};
//添加
const addConfig = () => {
  drawerRef.value.open();
  //清空数据
  Object.assign(formParams, {
    id: undefined,
    label: "",
    value: "",
    type: "",
    sort: 0,
    description: "",
    remarks: "",
  });
  nextTick(() => {
    formRef.value.clearValidate("label");
  });
};
//关闭
const handleCancel = () => {
  drawerRef.value.close();
};
//保存
const handleSubmit = async () => {
  //点击保存按钮的时候,务必需要保证表单全部复合条件在去发请求
  await formRef.value.validate();
  //按钮加载
  drawerRef.value.showloading();
  let params: any = Object.assign({}, formParams);
  const res = await reqSave(params);
  //添加或者更新成功
  if (res.code == 200) {
    //关闭抽屉
    handleCancel();
    //提示消息
    ElMessage({
      type: "success",
      message: formParams.id ? "编辑成功" : "添加成功",
    });
    drawerRef.value.hideloading();
    //获取最新的全部账号的信息
    pageNum.value = 1;
    inintData();
  } else {
    //关闭抽屉
    handleCancel();
    //提示消息
    ElMessage({
      type: "error",
      message: res.msg,
    });
    drawerRef.value.hideloading();
  }
};
//表单校验的规则对象
const rules = {
  //名称
  label: [{ required: true, trigger: "blur", validator: validatorNames }],
};
</script>
<style lang="scss" scoped></style>
